<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阴影</title>
    <style>
        .qu{
            width: 500px; height:300px; background: #fff; margin: 0 auto; position: relative; line-height: 300px; text-align: center; box-shadow: 0 0 20px  rgba(0,0,0,.8) inset;
        }
        .qu::before,.qu::after{
            content: ''; display: block;
            width: 460px; height: 100px; position: absolute; bottom: 0; left: 20px; border-radius: 100px/20px; background: #fff; 
            box-shadow: 0 0 20px rgba(0,0,0,.8); z-index: -1; margin: 0 auto;
        }
        #qiao{
             width: 500px; height:300px; background: #fff; margin: 20px auto; position: relative; line-height: 300px; text-align: center; box-shadow: 0 0 20px  rgba(0,0,0,.8) inset;
        }
        #qiao::before{
            content: ''; display: block;
            width: 250px; height: 30px; position: absolute; bottom: 12px; left: 20px; background: #fff; transform: rotate(-5deg) skew(-5deg);
            box-shadow: 0 0 30px 5px rgba(0,0,0,.8); z-index:-1; margin: 0 auto;
        }
        #qiao::after{
            content: ''; display: block;
            width: 250px; height: 30px; position: absolute; bottom: 11px; right: 12px; background: #fff; transform: rotate(5deg) skew(5deg);
            box-shadow: 0 0 30px 5px rgba(0,0,0,.8); z-index:-1; margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="qu">曲线阴影</div>
    <div id='qiao'>翘边阴影</div>
</body>
</html>